<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello vue</title>
    <script src="https://unpkg.com/vue@latest"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    //创建一个vue应用，保存到app变量
    //传入的参数表示，该应用最外层的组件应该如何展示
    //mvvm设计模式 m：model数据，v：view视图，vm：viewModel视图数据连接层（组件）
    const app = Vue.createApp({
        data() {
            return {
                message: 'hello world',
                msg_with_html: '<strong>hello</strong>',
                show: true,
                attrname: 'show',
                eventName: "click"
            }
        },
        methods:{
            handleClick(e) {
                console.log("clicked")
            }
        },
        template: 
        //v-once表示只在第一次渲染时使用这个变量
        //v-if的值为true时才展示该元素
        //v-bind可以将data中的变量作为标签中的属性，v-bind:可缩写为一个:
        //v-on即绑定事件，v-on:可缩写为一个@
        //@click.prevent 可阻止默认事件的同时绑定事件的响应函数
        //要让属性名用data变量表示，加上中括号即可，如@[eventName]="onClick"
        `
        <div>{{1+1}}</div>
        <div v-once>{{msg_with_html}}</div>
        <div>{{msg_with_html}}</div>
        <div v-html="msg_with_html"> </div>
        <div v-if="show" v-html="msg_with_html"> </div>
        <input v-bind:disabled="!show"> </input>
        <div v-on:click="handleClick">点我</div>
        <div 
            @click="handleClick"
            :title="message"
            :[attrname]="show"
        >点我2</div>
        <form action="https://baidu.com">
            <button type="submit" @click.prevent="handleClick">提交</button>
        </form>
        `
    });
    //vm代表这个app的根组件
    vm = app.mount("#root");
    console.log(vm.$data);
</script>
</html>